import React, { Component } from 'react'
import { Card, Input, Button, Select, Form, DatePicker  } from 'antd'
import Utils from '../../utils/Utils'
const FormItem = Form.Item
const Option = Select.Option
const RangePicker = DatePicker.RangePicker


class BaseForm extends Component {
    handleQuery =() =>{
        let fieldsValue = this.props.form.getFieldsValue();
        this.props.filterSubmit(fieldsValue)
    }
    handleReset = () =>{
        this.props.form.resetFields()
    }
    initFormList = () => {
        const { getFieldDecorator } = this.props.form;
        const formList = this.props.formList;
        const formItemList = [];
        if (formList && formList.length > 0) {
            formList.forEach((item, index) => {
                let label = item.label || '';
                let field = item.field || '';
                let initialValue = item.initialValue || '';
                let placeholder = item.placeholder || '';
                let width = item.width || '';
                let inputType = item.inputType || '';
                if (item.type == 'SELECT') {
                    const SELECT = (<FormItem label={label} key={field}>
                        {
                            getFieldDecorator([field], {
                                initialValue: initialValue
                            })(
                                <Select
                                    style={{ width: width }}
                                    placeholder={placeholder}
                                >
                                    {Utils.getOptionList(item.list)}
                                </Select>
                                )
                        }
                    </FormItem>);
                    formItemList.push(SELECT)
                }else if(item.type=='时间查询'){
                    const TIME = (<FormItem label='时间查询' key={field}>
                        {
                            getFieldDecorator("time")(
                                <RangePicker/>
                                )
                        }
                    </FormItem>);
                    formItemList.push(TIME)
                }else if(item.type=='INPUT'){
                    const INPUT = (<FormItem label={label} key={field}>
                        {
                            getFieldDecorator([field], {
                                initialValue: initialValue
                            })(
                                <Input type={inputType} placeholder={placeholder} />
                                )
                        }
                    </FormItem>);
                    formItemList.push(INPUT)
                }
            })
        }
        return formItemList;
    }
    render() {
        return (
            <div>
                <Form layout="inline">
                    {this.initFormList()}
                    <FormItem>
                        <Button type="primary" style={{ margin: '0 20px' }} onClick={this.handleQuery}>查询</Button>
                        <Button onClick={this.handleReset}>重置</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}

export default Form.create()(BaseForm);